<template>
  <h2>心血管病分析</h2>
  <hr style="margin-top: 10px" />
  <div id="main_echarts">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="echarts-div" id="gender">图1</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div class="echarts-div" id="age">图2</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <div class="echarts-div" id="height">图3</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div class="echarts-div" id="weight">图4</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { post, get, setItem, getItem, remItem, GetDataTest } from "../../utils/com";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Heart1",
  setup(props) {
    const gender_data = [0, 0];
    const age_data = [0, 0, 0];
    const height_data = [0, 0];
    const weight_data = [];
    return {
      gender_data,
      age_data,
      height_data,
      weight_data,
    };
  },
  methods: {
    initCharts() {
      this.gender_chart = this.$echarts.init(document.getElementById("gender"));
      this.gender_setOptions();
      this.age_chart = this.$echarts.init(document.getElementById("age"));
      this.age_setOptions();
      this.height_chart = this.$echarts.init(document.getElementById("height"));
      this.height_setOptions();
      this.weight_chart = this.$echarts.init(document.getElementById("weight"));
      this.weight_setOptions();
    },
    gender_setOptions() {
      var data = this.gender_data;
      //   console.log(22222, this.gender_chart, data);
      this.gender_chart.setOption({
        title: {
          text: "性别和患病的关系",
        },
        legend: {},
        tooltip: {},
        dataset: {
          source: [["是否患病", "患", "不患"], data[0], data[1]],
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }],
      });
    },
    gender_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/heart/gender").then(function (res) {
        var mydata = [
          ["男性", res.male[1], res.male[0]],
          ["女性", res.female[1], res.female[0]],
        ];
        _this.gender_data = mydata;
        _this.gender_setOptions();
        return res;
      });
    },

    age_setOptions() {
      var data = this.age_data;
      //   console.log(22222, this.gender_chart, data);
      this.age_chart.setOption({
        title: {
          text: "年龄和患病的关系",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ["不患", "患"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: {
              show: false,
            },
            data: data["index"],
          },
        ],
        series: [
          {
            name: "不患",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: data["data1"],
          },
          {
            name: "患",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "left",
            },
            emphasis: {
              focus: "series",
            },
            data: data["data0"],
          },
        ],
      });
    },
    age_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/heart/age").then(function (res) {
        var mydata = res;
        // console.log(mydata);

        var data0 = [];
        var data1 = [];
        for (let key in mydata["data"]) {
          // console.log(key +"===========> "+ mydata["data"][key])
          data0[data0.length] = mydata["data"][key][0] * -1;
          data1[data1.length] = mydata["data"][key][1];
        }
        mydata["data0"] = data0;
        mydata["data1"] = data1;

        _this.age_data = mydata;
        _this.age_setOptions();
        return res;
      });
    },

    height_setOptions() {
      var data = this.height_data;
      console.log(22222, this.height_chart, data);
      this.height_chart.setOption({
        legend: {},
        tooltip: {},
        title: {
          text: "身高和患病的关系",
        },
        xAxis: {
          //   data: data["columns"],
          data: ["0", "1"],
        },
        yAxis: {},
        series: [
          {
            type: "k",
            data: data["data"],
            // data: [[168, 156, 151, 157, 158],[156, 165, 169, 178, 158]],
          },
        ],
      });
    },
    height_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/heart/height").then(function (res) {
        // console.log(res);
        var mydata = [];
        mydata["columns"] = res["columns"];

        var data0 = [];
        var data1 = [];

        for (const key in res["data"]) {
          data0[data0.length] = res["data"][key][0];
          data1[data1.length] = res["data"][key][1];
        }
        mydata["data"] = [];
        mydata["data"][0] = data0;
        mydata["data"][1] = data1;

        console.log(mydata);

        _this.height_data = mydata;
        _this.height_setOptions();
        return res;
      });
    },

    weight_setOptions() {
      var data = this.weight_data;
      console.log(22222, this.weight_chart, data);
      this.weight_chart.setOption({
        legend: {},
        tooltip: {},
        title: {
          text: "体重和患病的关系",
        },
        xAxis: {
          //   data: data["columns"],
          data: ["0", "1"],
        },
        yAxis: {},
        series: [
          {
            type: "k",
            data: data["data"],
            // data: [[168, 156, 151, 157, 158],[156, 165, 169, 178, 158]],
          },
        ],
      });
    },
    weight_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/heart/weight").then(function (res) {
        var mydata = [];
        mydata["columns"] = res["columns"];

        var data0 = [];
        var data1 = [];

        for (const key in res["data"]) {
          data0[data0.length] = res["data"][key][0];
          data1[data1.length] = res["data"][key][1];
        }
        mydata["data"] = [];
        mydata["data"][0] = data0;
        mydata["data"][1] = data1;

        console.log(mydata);

        _this.weight_data = mydata;
        _this.weight_setOptions();
        return res;
      });
    },

    // 到底了
  },
  mounted() {
    const _this = this;
    this.initCharts();

    this.gender_axios();
    this.age_axios();
    this.height_axios();
    this.weight_axios();
  },
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin: 5px;
  height: 400px;
  width: 100%;
  border-radius: 4px;
  min-height: 36px;
  border: 3px solid rgb(90, 89, 89);
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.echarts-div {
  height: 99%;
  width: 99%;
}
</style>
